<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>effect(화면전환효과)</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<!--  메인 page -->
	<div data-role='page' id='main'>
		<div data-role='header'></div><h1>화면 전환 Example</h1>
		<div data-role='content'>
			<a href='#nextPage' data-role='button' data-transition='slide'>SLIDE</a>
			<a href='#nextPage' data-role='button' data-transition='slidedown'>slideDown</a>
			<a href='#nextPage' data-role='button' data-transition='slideup'>slideUp</a>
			<a href='#nextPage' data-role='button' data-transition='flip'>flip</a>
			<a href='#nextPage' data-role='button' data-transition='fade'>fade</a>
			<a href='#nextPage' data-role='button' data-transition='pop'>pop</a>
		</div>
		<div data-role='footer'>2조</div>
	</div>
<!--  두번째 page -->
	<div data-role='page' id='nextPage' data-add-back-btn='true'>
		<div data-role='header'><h1>두번째 페이지</h1></div>
		<div data-role='content'></div>
		<div data-role='footer'>2조</div>
	</div>
<!--  세번째 page -->
	<div>
		<div data-role='header' data-add-back-btn='true'>세번째 페이지</div>
		<div data-role='content'></div>
		<div data-role='footer'>2조</div>
	</div>

</body>
</html>